<template>
	<view>
		<view class="header">
			<view class="title">
				账号登录
			</view>
			<view class="goCount" @click="goCountlogin" >
				手机号登录
				<image class="sanjiao" src="@/static/sanjiao.png" mode=""></image>
			</view> 
			</view>
			<van-cell-group>
			  <van-field
			  :value="formData.account"
			    placeholder="请输入用户名"
			    border=true
				@input='getaccount'
				 type="text"
				 maxlength=11
			  />
			  <van-field
			  :value="formData.password"
			    placeholder="请输入密码"
			    border=true
				 type="password"
				@input='getpassword'
			  />
			</van-cell-group>
		<van-button class="btn" type="warning" @click='login'>登录</van-button>
	</view>
</template>

<script>
	import {accountlogin} from '@/api/account-login.js'
	export default {
		data() {
			return {
				formData:{
					account:'',
					password:''
				}
				
			};
		},
		methods:{
goCountlogin(){
	console.log(123);
},
async login(){
	const res=await accountlogin(this.formData)
	console.log(res);
},
getaccount(e){
	this.formData.account=e.detail
},
getpassword(e){
	this.formData.password=e.detail
}
		}
	}
</script>

<style lang="scss">
.header{
	display: flex;
	justify-content: space-between;
	margin-top: 88rpx;
	margin-bottom: 80rpx;
	.title{
		font-size: 24px;
		font-weight: 600;
		padding-left: 50rpx;
	}
}
.goCount{
	display: flex;
		width: 250rpx;
		height: 40px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 16px;
		color: #EF4F3F;
		letter-spacing: 0;
		text-align: right;
		.sanjiao{
			width: 20rpx;
			height: 20rpx;
			// line-height: 20rpx;
			padding-bottom: 60rpx;
			margin-left: 10rpx;
		}
		}
		.van-cell-group{
			margin-bottom: 50rpx;
			padding-top: 100rpx;
		}
	.btn{
		width: 618rpx;
		height: 100rpx;
		background: #FADCD9;
		border-radius: 70.54rpx;
		margin-left: 40rpx;
	}
</style>
